<template>
    <div class="mingxi" style=" height: inherit;  border:0px solid red;">
        <MkQueryContainer v-loading="loadingData" style="margin-right: 6px;">
            <template #header>
                <el-form label-width="auto" ref="queryForm" :inline="true">
                    <el-form-item label="关键字">
                        <el-input @keyup.enter.native="search" v-model="searchParam.keyword" clearable />
                    </el-form-item>
                    <el-form-item>
                        <MkButtonQuery @click="search"> </MkButtonQuery>
                        <MkButtonAdd @click="add"></MkButtonAdd>
                    </el-form-item>
                </el-form>
            </template>
            <MkTable :data="tableData" v-loading="loading">
                <MkColumn prop="title" label="标题" autoWidth />
                <MkColumnOption @show="query" @delete="del" deleteShowFile="title">
                    <template #default="{ row }">
                        <el-button icon="ele-EditPen" size="small" text @click="edit(row)">编辑</el-button>
                    </template>
                </MkColumnOption>
            </MkTable>
            <MkPagination v-model:page="searchParam.page" v-model:pageSize="searchParam.pageSize" :total="total"
                @query="search" layout="total, sizes, prev, pager, next," />
        </MkQueryContainer>

        <div style="width: calc(100% - 300px);  height: inherit;  border:0px solid blue;" v-loading="loadingData">
            <a-space size="large" style=" padding:10px">
                <MkButtonChecked icon='ele-Grid' :checked='true' size="middle">表格</MkButtonChecked>
                <MkButtonChecked icon='ele-Grid' :checked='false' size="middle">看板</MkButtonChecked>
                <MkButtonChecked icon='ele-Histogram' :checked='false' size="middle">图表</MkButtonChecked>
                <MkButtonChecked icon='ele-Plus' :checked='false' size="middle"></MkButtonChecked>
            </a-space>
            <div
                style="width: 100%; height: calc(100% - 80px);  border-radius: 5px; border:0px solid orange; background-color: #F8F8F8;">
                <MkTableView ref="tableViewRef" :data="tableViewData.data" :columns="tableViewData.columns"
                    viewId="1" />
            </div>
        </div>
        <EditQueryPage ref="editQueryPage" @onSuccess="search"></EditQueryPage>
    </div>
</template>

<script setup lang="ts">
import { MkTableView, defaultDataProcessConfig, type DataProcessConfig, type ColumnLayout } from '/@/componentsMaike/tables/MkTableView/index'
import { BasPrintDraftApi, BasPrintDraftOutput } from '/@/api/bas/BasPrintDraft';
import { usePageQuery, useLoadingFetch } from '/@/hooks'
import { clog, showSuccess } from '/@/utils'
import { enumCode } from '/@/const'
import EditQueryPage from './editQuery.vue'
// import { column_data } from './mockData'

defineOptions({
    name: 'MkDataPage',
});

const editQueryPage = ref();

const { fetch, loading: loadingData } = useLoadingFetch(BasPrintDraftApi.query4Tabulator);

const { searchParam, total, tableData, loading, search } = usePageQuery<BasPrintDraftOutput>(BasPrintDraftApi.page)
searchParam.category = enumCode.PrintCategory.智能表格;

const tableViewData = ref({ data: [], columns: [] });

onMounted(() => {
    search();
})

const add = () => {
    editQueryPage.value?.open();
}

const edit = (row: any) => {
    editQueryPage.value?.open(row);
}

const del = async (row: any) => {
    // 打开删除确认弹窗
    row.isDelete = true;
    await BasPrintDraftApi.update(row);
    search();
    showSuccess();
}

const query = async (row: any) => {
    var res = await fetch({ id: row.id })
    //var res = await BasPrintDraftApi.query4Tabulator({ id: row.id })
    //var res = column_data;
    tableViewData.value.columns = res.data.columns;
    tableViewData.value.data = res.data.t1;
    console.log(tableViewData.value);

}

</script>

<style lang='scss' scoped>
.mingxi {
    box-sizing: border-box;
    display: flex;
    position: relative;

    >div:first-child {
        width: 300px;
    }

    >div {
        box-sizing: border-box;
        height: 100%;
    }
}
</style>